通过使用 <grid> 标签，可以对幻灯片内容进行分块布局。
<grid> 布局能够调整幻灯片内容的大小和位置。
<grid drag="width height" drop="x y">
默认情况下，上述所有数值是基于幻灯片尺寸的百分比。如果是像素尺寸，请在数值后面加上单位（px）。
对于 Drag 参数，可以设置 x 和 y 设置正值和负值。正值和负值的总结如下：
x 值： 表示块距离幻灯片左边边缘的距离。x 值： 表示块距离幻灯片右边边缘的距离。y 值： 表示块距离幻灯片顶部边缘的距离。y 值：表示块距离幻灯片底部边缘的距离。<grid drag="25 55" drop="-5 10" style=bg="green">
25 x 55
为了方便，此插件对一些常用的网格位置进行命名。命名位置可以用于替代 drop 参数的 x 和 y 坐标。具体列表如下：
当 Drap 属性没有被指定是，grid 组件默认会设置为 50 和 100。
语法定义于网格排版流程。下面展示了如何使用 Flow 语法结构。
<grid drag="width height" drop="x y" flow="col | row">
对于 col 或 row 属性定义布局行为。如果为指定 flow 属性。将会自动继承默认的 col 流行为。
当 flow="col" 时，网格内布局如下：
以下幻灯片将会阐述这些说明。
Heading
Lorem Ipsum is simply dummy text
当 flow=row 时，布局如下：
bg 参数bg 参数用于定义 Grid 的背景。具体语法如下：
<grid drag="width height" drop="x y" bg="color">
其中，bg 参数的颜色可以使用任何有效的 CSS 颜色值。
Grid 中的 Border 属性可以显示自定义边框，具体语法如下。
<grid drag="width height" drop="x y" border="width style color">
其中：
thin,medum,thick 或者使用像素值（如10px）.dotted, solid, dashed, inset, 或者 outset。这里有一个简单的例子：
thick dotted blue
animate 属性能够用于定义grid 的动画。
<grid drag="width height" drop="x y" animate="type speed">
speed 选项是可选地。可以指定动画的速度慢一点，还是快一点。
Opacity 属性用于控制网格的不透明度。具体语法如下：
<grid drag="width height" drop="x y" opacity="level">
其中 level 可以取值 0.0 到 1.0 之间的人一直。透明度为 0.0 时网格不可见。
Filter 属性用于定义网格的过滤效果，具体语法如下：
<grid drag="width height" drop="x y" filter="effect">
对于Filter 属性的效果可以使以下类型之一：
这里有个例子：
Text is too blurry
Rotate 属性用于控制网格的二维旋转，具体语法如下：
<grid drag="width height" drop="x y" rotate="deg">
deg 选项为正数和负数，表示0到360 度旋转范围。
这里有个例子：
World!
Paddin 填充属性用于定义网格自定义的填充。
<grid drag="width height" drop="x y" pad="top right bottom left">
align 用于网格的水平对齐。
<grid drag="width height" drop="x y" align="type">
可用的选项如下：
下面是示例演示。